<template>
  <div id="chart-datazoom"
    style="width:100%;height:100%"></div>
</template>

<script>
  import * as echarts from 'echarts';
  const eleResizeDetector = require('element-resize-detector');

  export default {
    name: 'ChartDatazoom',
    props: {
      objdata: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      objdata(obj) {
        let { data1, data2, xAxisData } = obj;
        this.bardata1 = data1;
        this.bardata2 = data2;
        this.xAxisData = xAxisData;
        this.initChart();
      }
    },
    data() {
      return {
        xAxisData: [],
        bardata1: [],
        bardata2: []
      };
    },
    created() {},
    methods: {
      initChart() {
        const dom = document.getElementById('chart-datazoom');

        if (dom) {
          const chart = echarts.init(dom);
          let options = {
            grid: {
              left: 20,
              right: 20,
              bottom: 10,
              containLabel: true
            },
            legend: {
              show: false
            },
            tooltip: {
              trigger: 'axis',
              formatter: (params) => {
                let pone = params[0].axisValue;
                let str = '';
                for (let p of params) {
                  str += p.marker + p.seriesName + ':&nbsp;' + p.value + '&nbsp;' + '万亩<br />';
                }
                str = pone + '<br />' + str;
                return str;
              }
            },
            xAxis: {
              data: this.xAxisData,
              axisLine: { show: false },
              axisTick: { show: false },
              axisLabel: {
                color: '#fff',
                rotate: -45
              }
            },
            yAxis: {
              name: '单位：万亩',
              nameTextStyle: {
                color: '#fff',
                nameLocation: 'start'
              },
              type: 'value',
              axisLine: { show: false },
              splitLine: { lineStyle: { color: '#5d5d5d' } },
              axisLabel: {
                color: '#fff'
              }
            },
            dataZoom: [
              {
                type: 'slider',
                show: this.xAxisData.length > 8,
                start: 0,
                end: 8 / this.xAxisData.length > 1 ? 100 : (8 / this.xAxisData.length).toFixed(2) * 100,
                handleSize: 0,
                showDataShadow: false,
                showDetail: false,
                height: 7, //组件高度
                bottom: 0,
                zoomLock: true,
                brushSelect: false,
                borderColor: 'none'
              },
              {
                type: 'inside',
                start: 0,
                end: 8 / this.xAxisData.length > 1 ? 100 : (8 / this.xAxisData.length).toFixed(2) * 100,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true
              }
            ],
            series: [
              {
                name: '基本用地',
                type: 'bar',
                data: this.bardata1,
                barWidth: 12
              },
              {
                name: '种植用地',
                type: 'bar',
                data: this.bardata2,
                barWidth: 12
              }
            ]
          };
          chart.setOption(options);

          // 屏幕调整地图重新渲染
          const erd = eleResizeDetector();
          erd.listenTo(dom, () => {
            chart.resize();
          });
        }
      }
    }
  };
</script>